{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block title %}{{ title }} - 在线跑批系统{% endblock %}

{% block content %}
<h1><i class="fas fa-database me-2"></i>{{ title }}</h1>

<div class="card mt-4">
    <div class="card-body">
        <form method="post" novalidate>
            {% csrf_token %}
            
            <div class="row">
                <div class="col-md-6">
                    {{ form.name|as_crispy_field }}
                </div>
                <div class="col-md-6">
                    {{ form.db_type|as_crispy_field }}
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    {{ form.host|as_crispy_field }}
                </div>
                <div class="col-md-6">
                    {{ form.port|as_crispy_field }}
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    {{ form.username|as_crispy_field }}
                </div>
                <div class="col-md-6">
                    {{ form.password|as_crispy_field }}
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    {{ form.database_name|as_crispy_field }}
                </div>
                <div class="col-md-6">
                    {{ form.instance_name|as_crispy_field }}
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-12">
                    {{ form.description|as_crispy_field }}
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-12">
                    {{ form.is_active|as_crispy_field }}
                </div>
            </div>
            
            {{ form.test_connection }}
            
            <div class="mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-1"></i> 保存
                </button>
                <button type="submit" class="btn btn-outline-primary ms-2" id="testConnectionBtn">
                    <i class="fas fa-check-circle me-1"></i> 测试连接
                </button>
                <a href="{% url 'db_connection_list' %}" class="btn btn-outline-secondary ms-2">
                    <i class="fas fa-times me-1"></i> 取消
                </a>
            </div>
        </form>
    </div>
</div>

{% block extra_js %}
<script>
    // 测试连接按钮点击事件
    document.getElementById('testConnectionBtn').addEventListener('click', function() {
        // 设置测试连接标志
        document.querySelector('input[name="test_connection"]').value = 'true';
        
        // 提交表单
        document.querySelector('form').submit();
    });
    
    // 根据数据库类型设置默认端口
    document.querySelector('select[name="db_type"]').addEventListener('change', function() {
        const portInput = document.querySelector('input[name="port"]');
        switch(this.value) {
            case 'mysql':
                portInput.value = 3306;
                break;
            case 'sqlserver':
                portInput.value = 1433;
                break;
            case 'oracle':
                portInput.value = 1521;
                break;
        }
    });
</script>
{% endblock %}
{% endblock %}
